<template>
  <!-- 添加或修改回款对话框 -->
  <st-form-panel :title="title" v-loading="loading">
    <div slot="btm">
      <el-button type="primary" plain @click="save">保 存</el-button>
      <el-button type="primary" plain @click="$emit('list')">返 回</el-button>
    </div>
    <div slot="content">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="关联回款计划:" prop="planId">
              <el-input readonly  v-model="form.planName" placeholder="请选择回款计划" >
                <el-button slot="append" @click="receivablesPlanSelect" icon="el-icon-search"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="回款日期：" prop="returnTime">
              <el-date-picker
                v-model="form.returnTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请输入回款日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="回款方式：" prop="returnType">
              <el-select
                v-model="form.returnType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in dict.type.receivables_plan_returntype"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="回款金额:" prop="money">
              <el-input-number v-model="form.money" placeholder="请输入回款金额" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="备注:" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    <receivables-plan-select ref="receivablesPlanSelect" @selected="receivablesPlanSelected"></receivables-plan-select>
    </div>
  </st-form-panel>
</template>
<script>
import receivablesPlanSelect from '@/views/crm/components/receivablesPlanSelect.vue'
import {addReceivables, updateReceivables} from "@/api/crm/receivables";
export default {
  components:{
    receivablesPlanSelect
  },
  props:{
    customerForm:{
      type:Object,
      default:function() {
        return {};
      }
    }
  },
  dicts:['receivables_plan_returntype'],
  data() {
    return {
      form:{},
      loading:false,
      rules:{},
      title:''
    }
  },
  methods: {
    show(data){
      this.reset();
      if(typeof data === 'undefined'){
        this.title='添加回款单';
      }else{
        this.form=data;
        this.$set(this.form,'planName','合同：'+this.form.contractName+'，'+'第'+this.form.num+'期回款')
        this.title='修改回款单';
      }

    },
    // 表单重置
    reset() {
      this.form = {
        receivablesId: null,
        number: null,
        planId: null,
        customerId: null,
        contractId: null,
        returnTime: null,
        returnType: null,
        money: null,
        remark: null,
        checkStatus: null,
        examineRecordId: null,
        createdBy: null,
        ownerUserId: null,
        createdTime: null,
        updatedBy: null,
        updatedTime: null
      };
      this.resetForm("form");
    },
    save(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading=true;
          if (this.form.receivablesId != null) {
            updateReceivables(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.loading=false;
              this.$emit("list");
            });
          } else {
            addReceivables(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.loading=false;
              this.$emit('list');
            });
          }
        }
      });
    },
    receivablesPlanSelect(){
        this.$refs['receivablesPlanSelect'].show(this.form.planId,this.customerForm.customerId);
    },
    receivablesPlanSelected(item){
      this.$set(this.form,"planId",item.planId);
      this.$set(this.form,'planName','合同：'+item.contractName+'，'+'第'+item.num+'期回款');
      this.$set(this.form,'customerId',item.customerId);
      this.$set(this.form,'contractId',item.contractId);
    }
  }
}
</script>
<style scoped lang="scss">

::v-deep .el-radio{
  margin-right: 5px;
}
.el-select {
  width : 100%;
}
.el-input-number{
  width: 100%;
}
.el-date-editor{
  width: 100%;
}
</style>
